import { defineComponent, ref, onMounted, computed, watch } from "vue"
// 引入defineComponent ref等 使用unplugin-auto-import 可忽略
import type { SlotsType } from "vue"

interface Props {
  title: string
}

interface Slots {
  default?: (props: { data: number }) => JSX.Element
  header?: () => JSX.Element
  footer?: () => JSX.Element
}

export default defineComponent({
  name: "Index",
  props: {
    title: {
      type: String,
      required: true
    }
  },

  slots: Object as SlotsType<Slots>,

  setup(props: Props, { slots }) {
    // ===== 响应式状态 =====
    const count = ref(0)
    const inputValue = ref("")

    // ===== 计算属性 =====
    const doubleCount = computed(() => count.value * 2)

    // ===== 生命周期 =====
    onMounted(() => {
      console.log("Component mounted")
      // 初始化操作
    })

    // ===== 侦听器 =====
    watch(
      () => count.value,
      (newVal, oldVal) => {
        console.log(oldVal, newVal) // 响应变化, oldVal,newVal
      }
    )

    // ===== 方法 =====
    const increment = () => {
      count.value++
    }

    const handleInput = (e: Event) => {
      inputValue.value = (e.target as HTMLInputElement).value
    }

    // ===== 渲染函数 =====
    return () => (
      <div class="container">
        {/* 头部插槽（带默认内容） */}
        {slots.header?.() || <h1>{props.title}</h1>}

        {/* 内容插槽（作用域插槽） */}
        <div class="content">
          {slots.default?.({ data: count.value }) || (
            <div>
              <p>Current Count: {count.value}</p>
              <p>Double Count: {doubleCount.value}</p>
              <input type="text" value={inputValue.value} onInput={handleInput} placeholder="Type something..." />
              <button onClick={increment}>Increment</button>
            </div>
          )}
        </div>

        {/* 底部插槽 */}
        {slots.footer?.()}
      </div>
    )
  }
})
